<template>
	<button :style="[IconStyle]" class="circleIcon" :class="IconClass" :hover-class="IconHoverClass"
		@tap.stop="$emit('click')"> 
		<u-icon :name="icon" class="button-icon" :class="[ButtonTypeClass]" :color="IconColor" :size="IconSize">
		</u-icon>

	</button>
</template>

<script>
	export default {
		props: {
			plain: Boolean,
			size: {
				type: String,
				default: "large"
			},
			type: {
				type: String,
				default: 'default'
			},
			icon: {
				type: String,
				default: ''
			},
		},
		data() {
			return {

			}
		},

		computed: {
			IconSize() {
				let size = {
					'large': 28,
					'medium': 34,
					'small': 24

				}
				return size[this.size] ? size[this.size] : 24

			},
			IconSizeClass() {
				return `icon-size--${this.size}`
			},
			IconTypeClass() {
				let type = this.type;
				if (this.plain) {
					type = `${type}_plain`
				}
				return `icon-type--${type}`
			},
			IconHoverClass() {
				let type = this.type
				if (this.plain) {
					type = `${type}_plain`
				}
				return `icon-hover--${type}`
			},
			IconBlock() {
				let val = 'inline'
				return `icon-${val}`
			},

			IconClass() {
				return [this.IconSizeClass, this.IconTypeClass]
			},
			IconStyle() {
				return {}
			},

			IconColor() {
				let iconType = {
					// default: '#409EFF',
					default: '#fff',
					defaultPlain: '#409EFF',
					info: '#000000',
					fill:'#589EF8',
					
				}
				let type = this.type;
				if (this.plain) {
					type = `${type}Plain`
				}

				return iconType[type]
			}

		}
	}
</script>

<style lang="scss" scoped> 
	button{
		padding: 0 !important;
		&::after{
			border: none !important;
			border-radius: 0 !important;
			padding: 0 !important;
			margin: 0 !important;
			line-height: 0 !important;
		}
	}


	.icon {
		&-size {}
	}

	.circleIcon {
		display: inline-block;
	}

	.icon {


		&-size {
			&--small {
				font-size: 28rpx;
				height: 64prx;
				width: 64rpx;
				line-height: 64rpx;
				border-radius: 100%;
			}


			&--medium {
				font-size: 28rpx;
				height: 80prx;
				width: 80rpx;
				line-height: 80rpx;
				border-radius: 100%;
			}

			&--large {
				font-size: 32rpx;
				height: 88rpx;
				width: 88rpx;
				line-height: 88rpx;
				border-radius: 100%;
			}
		}

		&-hover {
			&--default {
				background-color: #3686D9 !important;
				color: #fff !important;

				&_plain {
					background-color: #409EFF !important;
					color: #fff !important;
				}
			}
			&--fill{
				background-color: #C5DBF9 !important;  
				color: #4A86D3 !important;
			}
			&--info {
				background-color: #ccc !important;

				&_plain {
					background-color: #fff !important;
					border-color: #409EFF !important;
					color: #409EFF !important;
				}
			}
		}

		&-type {
			&--default {
				border: none;
				background-color: #409EFF;
				color: #fff;
				
				&_plain {
					background-color: #FFFEFE;
					color: #409EFF;
					border-width: 2rpx;
					border-style: solid;
					border-color: #409EFF;
				}
			}
				
			&--fill{
				border: none;
				background-color: #DDE9FA; 
				
			}
			&--info {
				border: none;
				background-color: #EDEFF2;
				color: #909399;

				&_plain {
					background-color: #FFFEFE;
					color: #0F2E4D;
					border-width: 2rpx;
					border-style: solid;
					border-color: #DEE2EE;
				}

			}
		}

	}
</style>
